<template>
  <MenuPage class="impact-analysis">
    <template slot="search">
      <public-vulnerability-select-drawer
        style="width:180px; height: 32px; text-align: left; margin-left: 15px; display: flex; align-items: center; float: left;"
        :multiple="false"
        transfer
        placeholder="漏洞名称"
        ref="publicVulnerabilitySelect"
        v-model="queryParams.vulnerabilityId"></public-vulnerability-select-drawer>
      <Input
        clearable
        v-model.trim="queryParams.productComponentName"
        placeholder="关联组件名称"
        style="width: 180px;margin-left: 15px;" />
      <Input
        clearable
        v-model.trim="queryParams.groupId"
        placeholder="分组"
        style="width: 180px;margin-left: 15px;" />
      <Input
        clearable
        v-model.trim="queryParams.version"
        placeholder="版本"
        style="width: 180px;margin-left: 15px;" />
      <Button
        type="primary"
        ghost
        style="height: 32px;margin-left: 9px;"
        @click="getVulnerabilityScopeAnalysis">查询</Button>
    </template>
    <template slot="content">
      <Tree 
        :data="treeData"
        key="treeData"
        v-if="treeData.length"
        class="demo-tree-render"></Tree>
      <NoData v-else></NoData>
      <Spin size="large" fix v-show="loading"></Spin>
    </template>
  </MenuPage>
</template>

<script>
import { getVulnerabilityScopeAnalysis } from '@/view/testPlatform/components/public-vulnerability-select-drawer/vulnerability'
import PublicVulnerabilitySelectDrawer from '@/view/testPlatform/components/public-vulnerability-select-drawer'
import NoData from '@/components/common/no-data'

export default {
  name: 'ImpactAnalysis',
  components: {
    PublicVulnerabilitySelectDrawer,
    NoData
  },
  data() {
    return {
      networkList: [],
      queryParams: {
        groupId: '',
        productComponentName: '',
        version: '',
        vulnerabilityId: [],
        testNetinfoId: ''
      },
      treeData: [],
      loading: false
    }
  },
  methods: {
    // 获取漏洞影响力分析
    getVulnerabilityScopeAnalysis() {
      if (!this.queryParams.vulnerabilityId.length) {
        this.$Message.warning('请选择漏洞')
        return
      }
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.queryParams))
      params.vulnerabilityId = params.vulnerabilityId[0]
      getVulnerabilityScopeAnalysis(params).then(({ data = {} }) => {
        let { code, message } = data
        if (code !== 1) {
          this.treeData = []
          this.$Message.warning(message)
          return
        }
        let list = data.data || []
        let vulnerability = this.$refs.publicVulnerabilitySelect.getSelectedValue() || []
        let ret = this.assemblyDataByProduct(list, vulnerability[0])
        this.treeData = ret
      }).catch(() => {
        this.treeData = []
        this.$Message.error('获取漏洞影响力分析异常')
      }).finally(() => {
        this.loading = false
      })
    },
    // 将接口数据解构成树形组件需要的数据结构
    assemblyDataByProduct(list, vulnerability) {
      let ret = []
      ret = list.map(item => {
        let obj = {
          title: item.productName ? `${item.productName} (产品)` : item.componentName ? `${item.componentName} (组件)` : `${item.partName} (部件)`,
          children: [],
          expand: true,
        }
        let partList = item.vulnerabilityScopePartList || item.componentList || []
        let componentList = item.vulnerabilityScopeComponentList || item.componentList || []
        let childrenList = partList.concat(componentList)
        if (childrenList.length) { // 还存在子集，继续递归解构
          obj.children = this.assemblyDataByProduct(childrenList, vulnerability)
        } else { // 没有子集了，将漏洞本身放进数据中
          obj.children = [{
            title: `${vulnerability.name} (漏洞)`,
            children: [],
            expand: true,
          }]
        }
        return obj
      });
      return ret
    },
    renderContent(h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', {
          style: {
            width: 'calc(100% - 80px)',
            'word-break': 'keep-all',
            'white-space': 'nowrap',
            overflow: 'hidden',
            'text-overflow': 'ellipsis',
            display:'inline-block',
          }
        }, data.title),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, data.type)
      ]); 
    },
  }
}
</script>

<style scoped>
.vulnerability-influence-components {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
}
.search {
  margin: 20px 0;
  width: fit-content;
}
.search /deep/ .ivu-btn-primary.ivu-btn-ghost:not([disabled]){
    background-color:transparent;
    border: 1px solid #cccccc;
    color:#a5a5c6;
    outline: none;
    box-shadow: none;
}
.search /deep/ .ivu-btn-primary.ivu-btn-ghost:not([disabled]):hover,.search /deep/ .ivu-btn-default:not([disabled]):hover{
    background-color:transparent;
    border: 1px solid rgb(56 , 56, 211);
    color:rgb(56 , 56, 211);
    opacity: 1;
}
.search /deep/ .pageHeader .ivu-btn-ghost:hover>i,
.search /deep/ .img-header .ivu-btn-ghost:hover>i,
.search /deep/ .floatWrap .ivu-btn-ghost:hover>i{
    color: rgb(56 , 56, 211);
}
.demo-tree-render /deep/ .ivu-tree-title{
    width: 100%;
    color: var(--table-tr-color);
}
.content {
  flex: 1;
  width: 100%;
  position: relative;
  height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>